<template>
  <div class="lead-management">
    <div class="header-section">
      <h2>线索管理</h2>
      <div class="search-bar">
        <el-input
          v-model="searchForm.customerName"
          placeholder="客户名称"
          class="search-input"
        />
        <el-input
          v-model="searchForm.phone"
          placeholder="手机号码"
          class="search-input"
        />
        <el-select
          v-model="searchForm.status"
          placeholder="线索状态"
          class="search-select"
        >
          <el-option label="全部" value="" />
          <el-option label="待跟进" value="pending" />
          <el-option label="跟进中" value="following" />
          <el-option label="已转化" value="converted" />
          <el-option label="伪线索" value="fake" />
        </el-select>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="success" @click="handleAdd">新增线索</el-button>
      </div>
    </div>

    <div class="table-section">
      <el-table :data="leadList" style="width: 100%">
        <el-table-column prop="id" label="序号" min-width="80" />
        <el-table-column prop="customerName" label="客户名称" min-width="150" />
        <el-table-column prop="phone" label="手机号码" min-width="130" />
        <el-table-column prop="source" label="线索来源" min-width="120">
          <template #default="scope">
            <el-tag v-if="scope.row.source === 'import'" type="primary">导入</el-tag>
            <el-tag v-else-if="scope.row.source === 'manual'" type="success">手动添加</el-tag>
            <el-tag v-else-if="scope.row.source === 'activity'" type="warning">活动获取</el-tag>
            <el-tag v-else type="info">其他</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="level" label="线索等级" min-width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.level === 'A'" type="danger">A级</el-tag>
            <el-tag v-else-if="scope.row.level === 'B'" type="warning">B级</el-tag>
            <el-tag v-else-if="scope.row.level === 'C'" type="success">C级</el-tag>
            <el-tag v-else type="info">D级</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="owner" label="负责人" min-width="100" />
        <el-table-column prop="createTime" label="创建时间" min-width="160" />
        <el-table-column prop="lastFollowTime" label="最近跟进时间" min-width="160" />
        <el-table-column prop="status" label="线索状态" min-width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 'pending'" type="info">待跟进</el-tag>
            <el-tag v-else-if="scope.row.status === 'following'" type="primary">跟进中</el-tag>
            <el-tag v-else-if="scope.row.status === 'converted'" type="success">已转化</el-tag>
            <el-tag v-else type="danger">伪线索</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="280" fixed="right">
          <template #default="scope">
            <div style="display: flex; gap: 8px; flex-wrap: wrap;">
              <el-button
                type="primary"
                size="small"
                @click="handleEdit(scope.row)"
                style="min-width: 60px;"
                v-if="scope.row.status !== 'converted' && scope.row.status !== 'fake'"
              >
                编辑
              </el-button>
              <el-button
                type="success"
                size="small"
                @click="handleFollow(scope.row)"
                style="min-width: 60px;"
                v-if="scope.row.status !== 'converted' && scope.row.status !== 'fake'"
              >
                跟进
              </el-button>
              <el-button
                type="warning"
                size="small"
                @click="handleReportFake(scope.row)"
                style="min-width: 80px;"
                v-if="scope.row.status !== 'converted' && scope.row.status !== 'fake'"
              >
                伪线索上报
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="handleDelete(scope.row)"
                style="min-width: 60px;"
              >
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 添加/编辑线索对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="600px"
      @close="handleDialogClose"
    >
      <el-form :model="leadForm" label-width="100px">
        <el-form-item label="客户名称" required>
          <el-input v-model="leadForm.customerName" placeholder="请输入客户名称" />
        </el-form-item>
        <el-form-item label="手机号码" required>
          <el-input v-model="leadForm.phone" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="客户邮箱">
          <el-input v-model="leadForm.email" placeholder="请输入客户邮箱" />
        </el-form-item>
        <el-form-item label="线索来源" required>
          <el-select v-model="leadForm.source" placeholder="请选择线索来源">
            <el-option label="导入" value="import" />
            <el-option label="手动添加" value="manual" />
            <el-option label="活动获取" value="activity" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item label="线索等级" required>
          <el-select v-model="leadForm.level" placeholder="请选择线索等级">
            <el-option label="A级" value="A" />
            <el-option label="B级" value="B" />
            <el-option label="C级" value="C" />
            <el-option label="D级" value="D" />
          </el-select>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="leadForm.owner" placeholder="请输入负责人姓名" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="leadForm.remark"
            type="textarea"
            placeholder="请输入备注信息"
            :rows="3"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 线索跟进对话框 -->
    <el-dialog
      v-model="followDialogVisible"
      title="线索跟进"
      width="500px"
      @close="handleFollowDialogClose"
    >
      <el-form :model="followForm" label-width="100px">
        <el-form-item label="跟进内容" required>
          <el-input
            v-model="followForm.content"
            type="textarea"
            placeholder="请输入跟进内容"
            :rows="4"
          />
        </el-form-item>
        <el-form-item label="跟进方式" required>
          <el-select v-model="followForm.followType" placeholder="请选择跟进方式">
            <el-option label="电话" value="phone" />
            <el-option label="邮件" value="email" />
            <el-option label="微信" value="wechat" />
            <el-option label="面谈" value="meeting" />
          </el-select>
        </el-form-item>
        <el-form-item label="下次跟进时间">
          <el-date-picker
            v-model="followForm.nextFollowTime"
            type="datetime"
            placeholder="选择下次跟进时间"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="followDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleFollowSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'LeadManagement',
  data() {
    return {
      searchForm: {
        customerName: '',
        phone: '',
        status: ''
      },
      leadList: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      dialogVisible: false,
      dialogTitle: '',
      leadForm: {
        id: '',
        customerName: '',
        phone: '',
        email: '',
        source: 'manual',
        level: 'C',
        owner: '',
        remark: '',
        status: 'pending'
      },
      followDialogVisible: false,
      currentLead: null,
      followForm: {
        content: '',
        followType: 'phone',
        nextFollowTime: ''
      }
    }
  },
  mounted() {
    this.loadLeadList()
  },
  methods: {
    loadLeadList() {
      // 模拟数据
      this.leadList = [
        {
          id: 1,
          customerName: '张三',
          phone: '13800138001',
          email: 'zhangsan@example.com',
          source: 'manual',
          level: 'A',
          owner: '销售员A',
          createTime: '2023-10-15 10:30:00',
          lastFollowTime: '2023-10-20 14:20:00',
          status: 'following'
        },
        {
          id: 2,
          customerName: '李四',
          phone: '13900139002',
          email: 'lisi@example.com',
          source: 'import',
          level: 'B',
          owner: '销售员B',
          createTime: '2023-10-16 09:00:00',
          lastFollowTime: null,
          status: 'pending'
        },
        {
          id: 3,
          customerName: '王五',
          phone: '13700137003',
          email: 'wangwu@example.com',
          source: 'activity',
          level: 'C',
          owner: '销售员C',
          createTime: '2023-10-17 14:20:00',
          lastFollowTime: '2023-10-18 16:45:00',
          status: 'converted'
        },
        {
          id: 4,
          customerName: '赵六',
          phone: '13600136004',
          email: 'zhaoliu@example.com',
          source: 'manual',
          level: 'D',
          owner: '销售员A',
          createTime: '2023-10-18 11:15:00',
          lastFollowTime: null,
          status: 'fake'
        },
        {
          id: 5,
          customerName: '孙七',
          phone: '13500135005',
          email: 'sunqi@example.com',
          source: 'import',
          level: 'A',
          owner: '销售员B',
          createTime: '2023-10-19 16:45:00',
          lastFollowTime: '2023-10-20 10:30:00',
          status: 'following'
        }
      ]
      this.pagination.total = this.leadList.length
    },
    handleSearch() {
      // 这里实现搜索逻辑
      console.log('搜索参数:', this.searchForm)
      // 模拟搜索
      this.loadLeadList()
    },
    resetSearch() {
      this.searchForm = {
        customerName: '',
        phone: '',
        status: ''
      }
      this.loadLeadList()
    },
    handleAdd() {
      this.dialogTitle = '新增线索'
      this.leadForm = {
        id: '',
        customerName: '',
        phone: '',
        email: '',
        source: 'manual',
        level: 'C',
        owner: '',
        remark: '',
        status: 'pending'
      }
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.dialogTitle = '编辑线索'
      this.leadForm = { ...row }
      this.dialogVisible = true
    },
    handleFollow(row) {
      this.currentLead = row
      this.followForm = {
        content: '',
        followType: 'phone',
        nextFollowTime: ''
      }
      this.followDialogVisible = true
    },
    handleReportFake(row) {
      this.$confirm('确定要将该线索标记为伪线索吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里实现伪线索上报逻辑
        console.log('伪线索上报:', row)
        row.status = 'fake'
        this.$message({ type: 'success', message: '上报成功' })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消上报' })
      })
    },
    handleDelete(row) {
      this.$confirm('确定要删除该线索吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        // 这里实现删除逻辑
        console.log('删除线索:', row)
        const index = this.leadList.findIndex(item => item.id === row.id)
        if (index > -1) {
          this.leadList.splice(index, 1)
          this.pagination.total = this.leadList.length
        }
        this.$message({ type: 'success', message: '删除成功' })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    handleSubmit() {
      // 这里实现提交逻辑
      console.log('提交线索:', this.leadForm)
      if (this.leadForm.id) {
        // 编辑
        const index = this.leadList.findIndex(item => item.id === this.leadForm.id)
        if (index > -1) {
          this.leadList[index] = { ...this.leadForm }
        }
        this.$message({ type: 'success', message: '编辑成功' })
      } else {
        // 新增
        const newLead = {
          ...this.leadForm,
          id: Date.now(),
          createTime: new Date().toLocaleString(),
          lastFollowTime: null
        }
        this.leadList.unshift(newLead)
        this.pagination.total = this.leadList.length
        this.$message({ type: 'success', message: '新增成功' })
      }
      this.dialogVisible = false
    },
    handleFollowSubmit() {
      // 这里实现跟进提交逻辑
      console.log('线索跟进:', this.followForm)
      if (this.currentLead) {
        this.currentLead.lastFollowTime = new Date().toLocaleString()
        this.currentLead.status = 'following'
      }
      this.$message({ type: 'success', message: '跟进成功' })
      this.followDialogVisible = false
    },
    handleDialogClose() {
      // 对话框关闭时的处理
    },
    handleFollowDialogClose() {
      // 跟进对话框关闭时的处理
    },
    handleSizeChange(size) {
      this.pagination.pageSize = size
    },
    handleCurrentChange(current) {
      this.pagination.currentPage = current
    }
  }
}
</script>

<style scoped>
.lead-management {
  padding: 20px;
}

.header-section {
  margin-bottom: 20px;
}

.header-section h2 {
  margin-bottom: 15px;
  color: #303133;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.search-input {
  width: 200px;
}

.search-select {
  width: 150px;
}

.table-section {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>